<template>
    <div>
        <van-uploader :max-size="5 * 1024 * 1024" :max-count="1" :after-read="afterRead" v-model="fileList" />
    </div>
</template>
<script>
export default {
    name:'uploadImage',
    props:{
        value:{
            type:String,
            default:''
        }
    },
    data(){
        return {
            fileList:[],
            imgUrl:config.imgUrl,
            isUpdate:false

        }
    },
    methods:{
        afterRead(file){
            console.log(file);
            this.uploadingImg(file);
            let fd = new FormData();
            fd.append('file',file.file);
            this.$request({
                url: "/uploadDownload/api/imgUpload",
                method: "post",
                data: fd
            }).then(rsp => {
                console.log(rsp);
                if (rsp.code === 200) {
                    this.$emit("input", rsp.data);
                    this.successImg(file);
                } else {
                    this.$toast.fail(rsp.content);
                    this.failedImg(file);
                }
            });
        },
        uploadingImg(file){
            file.status = 'uploading';
            file.message = '上传中...';
        },
        failedImg(file){
            file.status = 'failed';
            file.message = '上传失败';
        },
        successImg(file){
            file.status = 'done';
            file.message = '上传成功';
        }
    },
    watch:{
      value(newVal,oldVal){
          console.log('watch',newVal);
          if(!this.isUpdate && newVal){
            this.fileList[0] = {url:this.imgUrl+newVal};
            this.isUpdate = true;
            console.log(this.fileList);
            this.$forceUpdate();
          }
      }
    }
}
</script>
<style scoped>

</style>